<template>
	<view>
		<u-navbar :background="background" immersive :title-color="tabIndex == 0 ?'#fff' :'#000'" :title="opacity == 1 ? '中盈甄品加油'  : tabIndex == 0 ? ' ' : '加油订单'"
		 :border-bottom="false" :back-icon-color="tabIndex == 0 ?'#fff' :'#000'"></u-navbar>
		<index ref="index" v-if="tabIndex == 0" />
		<order v-if="tabIndex == 1" />
		<view class="tab">
			<view class="tab-box">
				<view class="item" v-for="(item,index) in tab" :key="index" @click="tabChange(index)">
					<u-icon width="44" height="44" v-if="tabIndex != index" :name="appletImgUrl+item.icon"></u-icon>
					<view class="active-icon-box" v-else>
						<u-icon width="78" height="78" :name="item.activeIcon"></u-icon>
					</view>
					<view v-if="tabIndex == index" class="active-icon"></view>
					<view class="title">
						{{item.title}}
					</view>
				</view>
			</view>
			<view class="safe-area-inset-bottom"></view>
		</view>
		<view class="safe-area-inset-bottom"></view>
	</view>
</template>

<script>
import {appletImgUrl} from "@/common/config.js"
	import index from './index.vue'
	import order from './order.vue'
	export default {
		components: {
			index,
			order
		},
		data() {
			return {
				appletImgUrl:appletImgUrl,
				background: {
					backgroundImage: 'linear-gradient(90deg, rgba(253, 49, 41, ' + 0 + '), rgba(255, 77, 70, ' + 0 + '))'
				},
				tabIndex: 0,
				tab: [{
					title: '油站',
					icon: 'oll-tab-bar-index-icon.png',
					activeIcon: 'oll-tab-bar-index-active-icon.png'
				}, {
					title: '订单',
					icon: 'oll-tab-bar-order-icon.png',
					activeIcon: 'oll-tab-bar-order-active-icon.png'
				}],
				opacity: 0
			};
		},
		onLoad() {

		},
		onReachBottom() {
			this.$refs.index.reachBottom()
		},
		onPageScroll({
			scrollTop
		}) {
			if (this.tabIndex == 1) return
			var opacity = 0,
				maxNumber = uni.getSystemInfoSync().statusBarHeight + 44
			if (scrollTop <= maxNumber) {
				opacity = scrollTop / maxNumber
			} else {
				opacity = 1
			}
			if (opacity == this.opacity) return
			this.opacity = opacity
			this.background = {
				backgroundImage: 'linear-gradient(90deg, rgba(253, 49, 41, ' + this.opacity + '), rgba(255, 77, 70, ' + this.opacity +
					'))'
			}
		},
		methods: {
			tabChange(index) {
				let pageConfig, navConfig
				if (index == 0) {
					pageConfig = {
						"backgroundColorBottom": "#ffffff",
						"backgroundColorTop": "#FA3F3A",
						"backgroundColor": "#FA3F3A"
					}
					navConfig = {
						"frontColor": "#ffffff",
						"backgroundColor": ""
					}
					this.background = {
						backgroundImage: 'linear-gradient(90deg, rgba(253, 49, 41, ' + this.opacity + '), rgba(255, 77, 70, ' + this.opacity +
							'))'
					}
				} else {
					if (!uni.getStorageSync('userInfo')) {
						this.$u.route('/pages/user/login/login')
						return
					}
					pageConfig = {
						"backgroundColorBottom": "#ffffff",
						"backgroundColorTop": "#ffffff",
						"backgroundColor": "#ffffff"
					}
					navConfig = {
						"frontColor": "#000000",
						"backgroundColor": ""
					}
					this.background = {
						backgroundColor: '#fff'
					}
				}
				this.opacity = 0
				this.tabIndex = index
				uni.setNavigationBarColor(navConfig)
				uni.setBackgroundColor(pageConfig)
			},
			clearTouchMove(e) {
				return false
			},
			onDropDownClose() {
				this.stopMove = false
			},
			touchmove() {
				console.log(this.stopMove);
			},
			onDropDownOpen(e) {
				console.log(e);
				this.stopMove = true
			}

		}
	}
</script>

<style lang="scss">
	page {
		padding-bottom: 150rpx;
		background-color: transparent;
	}

	.tab {
		box-shadow: 0px -5rpx 11rpx 1rpx rgba(203, 202, 201, 0.2);
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #FFFFFF;
		z-index: 1;

		.tab-box {
			height: 100rpx;
			display: flex;
			align-items: flex-end;
			padding-bottom: 5rpx;

			.item {
				flex: 1;
				text-align: center;
				position: relative;

				.active-icon {
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					background-color: #FFFFFF;
					width: 98rpx;
					height: 98rpx;
					z-index: -1;
					border-radius: 50%;
					top: -12rpx;
				}

				.active-icon-box {
					position: relative;
					z-index: 1;
				}

				.title {
					font-size: 22rpx;
				}
			}
		}
	}
</style>
